<template>
    <div class="approvalProcess">
        <div class="item" v-for="(item,index) in processList" v-bind:key="index">
            <div class="title">{{item.nodeName}}</div>
            <div class="content">
                <div class="info">
                    <span class="role">{{userType[item.userType].label}}</span>
                    <span v-if="item.userType == 0">{{supplierName}}</span>
                    <span v-else>{{item.userName}}</span>
                    <span> {{ item.timeCreate | dateYMDHMSFormat }}</span>
                </div>
                <div :class='item.nodeStatus == 1 ? "spot pass":"spot"'>{{item.nodeStatus == 2 ? "驳回" : ""}} {{item.nodeComments}}</div>
            </div>
        </div>
        <div class="item" v-if="status == 1">
            <div class="title">平台审核</div>
            <div class="content">
                <div class="info">
                    <span class="role">平台</span>
                    <span>{{role.username}}</span>
                    <span></span>
                </div>
                <div class="spot">待审批</div>
                <div class="slotBox">
                    <el-form ref="ruleForm" label-width="80px" label-position="top">
                        <div class="slotTitle role">审核意见</div>
                        <el-radio-group v-model="flag" @change="flagChange">
                            <el-radio :label="true">通过</el-radio>
                            <el-radio :label="false">驳回</el-radio>
                        </el-radio-group>
                        <div class="rejectionBlock" v-if="flag === false">
                            <el-form-item label="驳回原因：" style="width:322px">
                                <el-input v-model="rejection"></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                    <div class="actions">
                        <el-button type="primary" :loading="loading" @click="handlePlatform">确定</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { userType } from "@/utils/status.js";
export default {
    components: {},
    data () {
        return {
            processList: [
            ],
            userType: userType,
            flag: "",
            role: {
                username: ""
            },
            rejection: ""
        };
    },
    props: {
        id: {
            type: String
        },
        supplierName: {
            type: String
        },
        loading: {
            type: Boolean,
            default: false
        },
        status: {
            type: Number,
            default: 0
        }
    },
    created () {
    },
    watch: {
        id (newStr, oldStr) {
            this.getFlowsList()
        }
    },
    mounted () {


    },
    methods: {
        flagChange (e) {
            if (e) {
                this.rejection = ""
            }
        },
        handlePlatform () {
            console.log(this.flag)
            if (this.flag === "") {
                this.$message.warning("请选择审批意见");
                return false;
            }
            if (!this.flag && this.rejection == "") {
                this.$message.warning("请填写驳回原因");
                return false;
            }
            this.$confirm("是否确认该审批结果?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {

                this.$emit("isLoading", true)
                let data = {
                    flag: this.flag,
                    id: this.id,
                    operator: this.role.username,
                    rejection: this.rejection
                }
                this.$post({ url: '/sellerInfo/approve', data }).then(
                    () => {
                        this.$message.success("审批成功");
                        this.getFlowsList()
                        this.$emit("isLoading", false)
                    },
                    () => {
                        this.$emit("isLoading", false)
                    }
                );
            })
        },
        getFlowsList () {
            let params = {
                id: this.id,
                business: 2
            };
            this.role = JSON.parse(localStorage.getItem("user"))
            this.$get({ url: "/flows/list", params }).then(res => {
                this.processList = res
            })
        }
    },
};
</script>
<style scoped lang="scss">
.item {
    padding-left: 26px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    position: relative;
    margin-bottom: 16px;
    .title {
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
    }
    .content {
        background: rgba(0, 0, 0, 0.02);
        width: 712px;
        padding: 16px;
        margin-top: 8px;
        span {
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 22px;
            &.role {
                color: rgba(0, 0, 0, 0.85);
            }
        }
        .info {
            margin-bottom: 4px;
        }
        .spot {
            color: #52c41a;
            &.pass {
                color: #3a85f5;
            }
        }
    }
    &::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: #3a85f5;
        top: 6px;
        border-radius: 300px;
        left: 0;
    }
    &::before {
        content: "";
        position: absolute;
        background: #3a85f5;
        width: 1px;
        bottom: -19px;
        left: 4px;
        top: 20px;
    }
    &:last-child {
        &::before {
            content: none;
        }
    }
    .slotBox {
        margin-top: 16px;
        .slotTitle {
            margin-bottom: 8px;
        }
        .actions {
            margin-top: 24px;
        }
    }
    .rejectionBlock {
        width: 632px;
        background: #ffffff;
        border-radius: 2px;
        margin-top: 20px;
        padding: 10px 24px;
    }
}
</style>
